<template>
	<view class="app">


		<!-- 城市简称键盘 -->
		<view v-if="citytxtIsshow" class="fixed">
			<view class="mask" @tap="onMask('city')"></view>
			<view class="fixeds">
				<city :citytxt="citytxt" @changecity="changecity" @onMask="onMask(i)" />
			</view>
		</view>


		<!-- 车牌键盘 -->
		<view v-if="carnumberIsshow" class="fixed">
			<view class="mask" @tap="onMask('carnumber')"></view>
			<view class="fixeds">
				<carnumber @click="getcarnumber" />
			</view>
		</view>


		<!-- 轮播图 -->
		<view class="swiper">
			<swiper class="swiper" circular autoplay :interval="interval" :duration="duration">
				<swiper-item v-for="item in imgUrls">
					<image :src="item.image"></image>
				</swiper-item>
			</swiper>
		</view>


		<!-- 使用说明 -->
		<view class="menu_wrap">
			<view class="submenu">
				<view class="submenu_title">累计帮助
					<text>{{helpnum}}</text>
					位车主轻松过检
				</view>
				<view class="submenu_item">
					<view class="item">
						<view class="img">
							<image src="../../static/crowd.png" />
						</view>
						<view class="title">六年免检</view>
						<view>一键办理</view>
					</view>
					<view class="item">
						<view class="img">
							<image src="../../static/steeringwheel.png" />
						</view>
						<view class="title">拍照上传</view>
						<view>快递到家</view>
					</view>
					<view class="item">
						<view class="img">
							<image src="../../static/rocket.png" />
						</view>
						<view class="title">年审完成</view>
						<view>实时提醒</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 输入车牌 -->
		<view class="carnumber">
			<view class="wrap">
				<view class="txt">车牌号码</view>
				<view class="car">
					<view class="province" @tap="onkeyboard('city')">{{citytxt}}</view>
					<view class="number" @tap="onkeyboard('carnumber')">{{carnumber}}</view>
				</view>
			</view>

			<view class="tip">
				*支持全国办理
			</view>


			<!-- <form @submit='handle' report-submit='true' > -->
			<view class="handle">
				<!-- 获取formid -->
				<!-- #ifdef MP-WEIXIN -->
				<button class="absolute" lang="zh_CN" open-type="getUserInfo" @getuserinfo="handle" withCredentials="true">微信授权获取用户信息</button>
				<!-- #endif -->
				<!-- <button  class="absolute" form-type='submit'></button> -->
				<view>立即办理</view>

			</view>
			<!-- </form> -->



		</view>

		<view class="tabs">
			<view class="tabswrap">
				<wuc-tab :tab-list="tabList" textFlex :tabCur.sync="TabCur" @change="tabChange"></wuc-tab>

				<!-- 办理流程 -->
				<view class="tab" v-if="TabCur==0">
					<view class="entry">
						<view class="img" style="background-color: #83c58d;">
							<view class="fonticon" style="font-size: 60rpx;color: #fff;">&#xe6e7;</view>
						</view>
						<view class="txt">
							<view class="title">上传资料</view>
							<view class="content">上传行驶证,交强险图片后下单(无需邮寄资料)</view>
						</view>
					</view>

					<view class="entry">
						<view class="img" style="background-color: #ebaf71;">
							<view class="fonticon" style="font-size: 60rpx;color: #fff;">&#xe6fc;</view>
						</view>
						<view class="txt">
							<view class="title">年审代办</view>
							<view class="content">收到您的办理申请后，将为您代办免检，大约需要2~3个工作日</view>
						</view>
					</view>



					<view class="entry">
						<view class="img" style="background-color: #5a4e9a;">
							<view class="fonticon" style="font-size: 60rpx;color: #fff;">&#xe6f3;</view>
						</view>
						<view class="txt">
							<view class="title">资料寄回</view>
							<view class="content">办理完后将按照您提交的地址回寄免检合格标志</view>
						</view>
					</view>
				</view>


				<!-- 办理条件 -->
				<view class="tab" v-if="TabCur==1">
					<view class="condition">

						<view class="item">
							<view class="img">
								<view class="fonticon">
									&#xe685;
								</view>
							</view>
							<view class="txt">
								车辆注册日期在六年以内
							</view>
						</view>

						<view class="item">
							<view class="img">
								<view class="fonticon">
									&#xe604;
								</view>
							</view>
							<view class="txt">
								非运营轿车（含大型轿车）和其他小型、卫星载运汽车<text>（面包车、7座及7座以上车辆除外）</text>
							</view>
						</view>


						<view class="item">
							<view class="img">
								<view class="fonticon">
									&#xe68a;
								</view>
							</view>
							<view class="txt">
								交强险、车船税在有效期内
							</view>
						</view>

						<view class="item">
							<view class="img">
								<view class="fonticon">
									&#xe7f3;
								</view>
							</view>
							<view class="txt">
								车辆无违章<text>（如有违章请先处理完违章再下单）</text>
							</view>
						</view>

						<view class="item">
							<view class="img">
								<view class="fonticon">
									&#xe616;
								</view>
							</view>
							<view class="txt">
								无重大交通事故
							</view>
						</view>

					</view>
				</view>


			</view>


		</view>



	</view>
</template>

<script>
	import WucTab from '@/components/wuc-tab/wuc-tab.vue';

	import carnumber from '@/components/carnumber';
	import city from '@/components/city';

	// 接口相关
	import _function from '@/common/_function.js'
	import api from '@/common/api.js'

	export default {
		components: {
			carnumber,
			city,
			WucTab
		},
		data() {
			return {
				imgUrls: [], //轮播图
				interval: 5000,
				duration: 1000,


				helpnum: '', //帮助的人数

				carnumber: '请输入车牌',
				carnumberIsshow: false, //车牌号键盘 显示/隐藏
				citytxt: '豫',
				citytxtIsshow: false, //城市简称 显示/隐藏
				active: 0, //选中

				TabCur: 0,
				tabList: [{
					name: '办理流程'
				}, {
					name: '办理条件'
				}],
			}
		},

		async onLoad(options) {
			
			
			
			
			console.log(options)
			// 从分享页面进入
			if (options.pid) {
				if (options.pid != 0) {
					getApp().globalData.pid = options.pid
				}
			}

			// 从海报进入
			if (options.scene) {
				getApp().globalData.pid = options.scene
			}





			const res = await _function.request(api.swiper)
			console.log(res)
			if (res.data.code == 200) {
				this.imgUrls = res.data.data.img
				this.helpnum = res.data.data.helpnum
			} else {
				uni.showToast({
					title: '轮播图获取失败',
					duration: 2000,
					icon: 'none'
				})
			}
		},
		methods: {
			// 选项卡切换
			tabChange(index) {
				this.TabCur = index;
			},
			// 立即办理
			async handle(e) {
				
				if (e.detail.iv || e.detail.signature) {
				
					let res = await _function.request(api.getuserinfo)
				
					let bol = false
					if (res.data.code == 200) {
						bol = true
					} else {
						bol = await _function.login(e.detail.userInfo)
						if (bol) {
							getApp().globalData.islogin = true
						}
				
					}
					console.log(this.carnumber.length)
					// ture 表示登录成功 false表示登录失败
					if (bol) {
						if (this.carnumber === '请输入车牌') {
							uni.showToast({
								title: '请输入车牌',
								duration: 2000,
								icon: 'none'
							})
							return false
						} else if (this.carnumber.length <6 || this.carnumber.length > 7) {
							uni.showToast({
								title: '车牌有误',
								duration: 2000,
								icon: 'none'
							})
							return false
						} else {
						
							uni.navigateTo({
								url: `../form/form?carnumber=${this.carnumber}&citytxt=${this.citytxt}`
							})
						}
					}
				}
				
				


				

			},



			//改变键盘
			onkeyboard(e) {
				console.log(e)
				if (e === 'carnumber') {
					// 输入车牌号
					if (this.carnumber === "请输入车牌") {
						this.carnumber = ''
					}

					this.carnumberIsshow = true
				} else {
					// 选择城市
					this.citytxtIsshow = true
				}
			},

			// 关闭遮罩层
			onMask(i) {
				console.log(i)
				if (i === 'carnumber') {
					console.log('关闭输入车牌号键盘')
					if (this.carnumber.length == 0) {
						this.carnumber = '请输入车牌'
					}
					this.carnumberIsshow = false
				} else {
					console.log('关闭输入城市键盘')
					this.citytxtIsshow = false
				}
			},


			// 子组件触发的
			getcarnumber(item) {
				console.log(item)
				console.log(this.carnumber)
				if (item === '删除') {
					console.log('删除')
					this.carnumber = this.carnumber.substring(0, this.carnumber.length - 1)
				} else if (item === '返回') {
					if (!this.carnumber.length) {
						this.carnumber = '请输入车牌'
					}

					this.carnumberIsshow = false
					console.log(this)
				} else {
					this.carnumber += item;
				}
			},


			// 子组件改变城市简称
			changecity(item) {
				this.citytxt = item
				this.citytxtIsshow = false
			},


			//分享
			onShareAppMessage(res) {
				let imageUrl = getApp().globalData.shareimg || "../../static/share.jpg"
				return {
					title: getApp().globalData.sharetext||'车友有福了,小程序一键办理全国六年免检,快递到家',
					path: `pages/index/index?pid=${getApp().globalData.uid}`,
					imageUrl
				}
			}

		},




	}
</script>

<style lang="scss" scoped>
	.app {
		position: relative;
		height: 100%;


		// 轮播图
		.swiper {
			height: 360rpx;

			swiper {
				width: 100%;
			}
		}

		.fixed {
			.mask {
				position: fixed;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, .2);
				z-index: 100
			}

			.fixeds {
				position: fixed;
				bottom: 0;
				width: 100%;
				z-index: 999;
			}
		}





		.menu_wrap {
			position: relative;
			height: 260rpx;

			.submenu {
				position: absolute;
				width: 90%;
				height: 100%;
				top: -50rpx;
				left: 0;
				right: 0;
				margin: auto;
				border-radius: 10rpx;
				background-color: #fff;
				padding: 20rpx 40rpx 0 40rpx;
				box-sizing: border-box;

				.submenu_title {
					border-bottom: 1px solid #f0f3f8;
					display: flex;
					justify-content: center;
					align-items: center;
					padding-bottom: 16rpx;
					font-size: 26rpx;

					text {
						color: #e59c31;
						margin: 0 10rpx;
					}
				}

				.submenu_item {
					padding: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #CFCFCF;
					font-size: 20rpx;

					.item {
						display: flex;
						flex-direction: column;
						align-items: center;

						.img {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
							overflow: hidden;
							background-color: #f0f3f8;
							display: flex;
							justify-content: center;
							align-items: center;

							image {
								width: 50rpx;
								height: 50rpx;
							}
						}

						.title {
							font-size: 28rpx;
							color: #e59c31;
						}
					}
				}
			}
		}

		.carnumber {

			padding: 20rpx 80rpx;

			.wrap {
				padding: 20rpx;
				border-radius: 10rpx;
				box-shadow: 2rpx 2rpx 6rpx #C8C7CC;
				display: flex;
				align-items: center;
				background-color: #fff;

				.txt {
					width: 30%;
					text-align: center;
					font-size: 28rpx;
				}

				.car {
					display: flex;
					align-items: center;
					width: 70%;
					height: 50rpx;
					box-sizing: border-box;

					.province {
						width: 50rpx;
						height: 50rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #4989ff;
						color: #fff;
						border-radius: 5rpx;
						margin-right: 10rpx;
						box-sizing: border-box;
					}

					.number {
						height: 100%;
						display: flex;
						align-items: center;
						flex: 1;
					}
				}
			}

			.tip {
				margin-top: 20rpx;
				font-size: 22rpx;
				color: #CFCFCF;
			}

			.handle {
				position: relative;
				margin: 40rpx 0;
				background-color: #4372fb;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50rpx;
				padding: 20rpx 0;
				font-size: 30rpx;
				letter-spacing: 8rpx;


			}


		}

		// 滑块
		.tabs {
			padding: 20rpx 40rpx;
			font-size: 26rpx;

			.tabswrap {
				border-radius: 10rpx;
				overflow: hidden;

				.tab {

					.entry {
						padding: 20rpx;
						display: flex;
						background-color: #fff;

						.img {
							width: 80rpx;
							height: 80rpx;
							margin-right: 20rpx;
							border-radius: 50%;
							overflow: hidden;
							display: flex;
							justify-content: center;
							align-items: center;
						}

						.txt {
							flex: 1;

							.title {
								margin-bottom: 10rpx;
							}

							.content {
								font-size: 22rpx;
								color: #D1D1D1;
							}
						}

					}

					//办理条件
					.condition {
						padding: 20rpx;
						background-color: #fff;

						.item {
							padding: 20rpx;
							margin: 20rpx 0;
							display: flex;
							align-items: center;
							background-color: #d1ecf7;
							border-radius: 10rpx;

							.img {
								margin-right: 20rpx;

								.fonticon {
									font-size: 30rpx;
									color: #007AFF;
								}
							}

							.txt {
								flex: 1;

								text {
									color: #f60;
								}
							}
						}
					}

				}

			}

		}



	}
</style>
